<template>
  <div>
    <div class="header">
      <Title title="发文采集效果" font-size="16px"/>
      <el-button type="primary" plain size="small" style="background:#fff;color:#406EFF;width:64px;padding:7px 0px;margin-left: 32px;" @click="handleSet">设置</el-button>
    </div>
    <div class="container">
      <u-table
        v-if="list.length > 0"
        ref="healthRef"
        :data="list"
        :border="true"
        :row-height="49"
        beautify-table
        header-drag-style
        use-virtual
        class="fb-table"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row
      >
        <u-table-column align="left" label="发文信息" min-width="120">
          <template slot="header" slot-scope="scope">
            <div class="flex-center">
              <span>{{ scope.column.label }}</span>
              <tipIcon :content="`每个账号${collectionData.normalFrequency}小时采集一次，采集最近${collectionData.validCollectionDays}天内发布的所有新发文`" class="ml4"/>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="item">
              <span class="label">正常号采集频率：</span>
              <span>{{ scope.row.normalFrequency }}小时</span>
            </div>
            <div class="item">
              <span class="label">正常号夜间采集频率：</span>
              <span>{{ scope.row.nightFrequency }}小时</span>
            </div>
            <div class="item">
              <span class="label">夜间时段：</span>
              <span>{{ scope.row.nightStart }}-{{ scope.row.nightEnd }}</span>
            </div>
            <div class="item">
              <span class="label">闲置/禁言号采集频率：</span>
              <span>{{ scope.row.forbiddenFrequency }}小时</span>
            </div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="异常状态">
          <template slot="header" slot-scope="scope">
            <div class="flex-center">
              <span>{{ scope.column.label }}</span>
              <tipIcon :content="`每个账号${collectionData.abnormalFrequency}小时采集一次，采集最近${collectionData.validCollectionDays}天内的所有发文的最新状态`" class="ml4"/>
            </div>
          </template>
          <template slot-scope="scope">
            <span class="label">采集频率：</span>
            <span>{{ scope.row.abnormalFrequency }} 小时</span>
          </template>
        </u-table-column>
        <u-table-column align="left" label="采集有效期">
          <template slot="header" slot-scope="scope">
            <div class="flex-center">
              <span>{{ scope.column.label }}</span>
              <tipIcon :content="`发文采集效果的采集发布时间范围：最近${collectionData.validCollectionDays}天内`" class="ml4"/>
            </div>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.validCollectionDays }}日</span>
          </template>
        </u-table-column>
      </u-table>
      <empty-placeholder v-else :empty-img="emptyIcon" image-size="120px" style="margin-bottom: 24px" />
    </div>
    <collectionSet ref="collectionSet" @update="getCollectSetData" />
  </div>
</template>

<script>
import collectionSet from './collectionSet';
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import { getAccountCollection } from '@/api/accounts';
import { mapState } from 'vuex';
import emptyIcon from '@/assets/home/emptyIcon.png';

export default {
  components: { collectionSet, Title, EmptyPlaceholder },
  data() {
    return {
      emptyIcon,
      collectionData: {}
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    list() {
      return this.collectionData && JSON.stringify(this.collectionData) !== '{}' ? [this.collectionData] : [];
    }
  },
  created() {
    this.getCollectSetData();
  },
  methods: {
    handleSet() {
      this.$refs['collectionSet'].openDialog(this.collectionData);
    },
    handleClose() {
      this.$refs['collectionSet'].handleClose();
    },
    getCollectSetData() {
      getAccountCollection().then(res => {
        if (res.code === 200) {
          this.collectionData = res.data;
        }
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.label {
  color: #999;
}
.container {
  margin-bottom: 32px;
}
</style>
